import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../services/ScreenAdaper.dart';
import '../../config/Config.dart';

class HomeNewPage extends StatefulWidget {
  const HomeNewPage({Key? key}) : super(key: key);

  @override
  _HomeNewPageState createState() => _HomeNewPageState();
}

class _HomeNewPageState extends State<HomeNewPage> {
  @override
  void initState() {
    super.initState();
    print('刷新了新版本主页页面');
  }

  /// 轮播图组件
  Widget _swiperWidget() {
    List<Map> imgList = [
      {'url': 'http://112.126.61.91:3000/img/appimg/banner1.jpg'},
      {'url': 'http://112.126.61.91:3000/img/appimg/banner2.jpg'},
      {'url': 'http://112.126.61.91:3000/img/appimg/banner3.jpg'},
      {'url': 'http://112.126.61.91:3000/img/appimg/banner4.jpg'}
    ];
    return Container(
      child: AspectRatio(
        aspectRatio: 7.5 / 6.5, // 宽高比750/650
        child: Swiper(
          key: UniqueKey(), // 这个必须添加，代表唯一
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              imgList[index]['url'],
              fit: BoxFit.fill,
            );
          },

          itemCount: imgList.length,
          pagination: SwiperPagination(
            builder: DotSwiperPaginationBuilder(
                // 指示器构建
                space: ScreenUtil().setWidth(5), // 点之间的间隔
                size: ScreenUtil().setWidth(10), // 没选中时的大小
                activeSize: ScreenUtil().setWidth(12), // 选中时的大小
                color: Colors.white, // 没选中时的颜色
                activeColor: Color(0xFFdf769e)), // 选中时的颜色
          ),
          // control: new SwiperControl(),
          autoplay: true,
        ),
      ),
    );
  }

  /// 横向列表ListView
  Widget _hotProductListWidget() {
    List<Map> dataList = [
      {'name': '莓果'},
      {'name': '缤纷'},
      {'name': '绚烂'},
      {'name': '甜蜜'},
    ];
    int myCount = 4;
    // ListView里想要包裹ListView就要套进Container
    return Container(
      height: 90.w,
      padding: EdgeInsets.only(bottom: 10.w, left: 20.w, right: 20.w),
      child: ListView.builder(
        scrollDirection: Axis.horizontal, // 这个控制纵向还是横向滚动
        itemBuilder: (context, index) {
          var pngName = index + 2;
          return Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(10.w),
                height: 57.5.w,
                width: 57.5.w,
                margin: EdgeInsets.only(
                    right: (index + 1) == myCount
                        ? 0
                        : 30.w), // 设置最后一个右边距为0，啊我太机智了呢，用的是JS的写法蒙的
                child: Image.network(
                  'http://112.126.61.91:3000/img/0$pngName.png',
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                width: 57.5.w,
                height: 20.w,
                margin:
                    EdgeInsets.only(right: (index + 1) == myCount ? 0 : 30.w),
                child: Text(
                  dataList[index]['name'],
                  textAlign: TextAlign.center,
                ),
              )
            ],
          );
        },
        itemCount: myCount,
      ),
    );
  }

// 卡片组件
  /// 纵向列表组件

  Widget _cardWidgetList() {
    List<Map> imgList = [
      {
        'url': 'http://112.126.61.91:3000/images/index/sbanner2.jpg',
        'name': '莓果缤纷蛋糕',
        'money': '198',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/images/index/sbanner3.jpg',
        'name': '浓情蜜意蛋糕',
        'money': '698',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/images/index/sbanner5.jpg',
        'name': '花开富贵蛋糕',
        'money': '498',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/img/appimg/ia_100000024.jpg',
        'name': '风味蛋糕',
        'money': '398',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/img/appimg/ia_100000033.jpg',
        'name': '绚烂多彩蛋糕',
        'money': '198',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/img/appimg/ia_100000027.jpg',
        'name': '爱意蛋糕',
        'money': '298',
        'name1': 'Berries Cream Cake'
      },
      {
        'url': 'http://112.126.61.91:3000/img/appimg/ia_100000020.jpg',
        'name': '期盼的心蛋糕',
        'money': '198',
        'name1': 'Berries Cream Cake'
      },
    ];
    return Container(
      padding: EdgeInsets.all(10.w),
      child: Wrap(
        runSpacing: 10, //上下距离
        spacing: 10, // 左右距离
        children: imgList.map((value) {
          return Container(child: _cardWidget(value));
        }).toList(),
      ),
    );
  }

  Widget _cardWidget(obj) {
    String money = obj['money'];
    return Card(
      color: Colors.white,
      //z轴的高度，设置card的阴影
      elevation: 20.0,
      //设置shape，这里设置成了R角
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
      //对Widget截取的行为，比如这里 Clip.antiAlias 指抗锯齿
      clipBehavior: Clip.antiAlias,
      semanticContainer: false,
      child: Column(
        crossAxisAlignment:
            CrossAxisAlignment.start, // 解决flutter 设置Text文本左对齐无效的问题
        children: <Widget>[
          Container(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 24 / 10, // 防止服务器返回图片高度宽度不一致导致的页面问题
              child: Image.network(
                obj['url'],
                fit: BoxFit.cover,
              ),
              key: UniqueKey(),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 18.w, top: 10.w),
            child: Text(
              obj['name'],
              maxLines: 2, // 超过2行就换行
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color(0xFF515151),
                fontSize: 16,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 18.w),
            child: Text(
              obj['name1'],
              maxLines: 2, // 超过2行就换行
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color(0xFFc6c6c6),
                fontSize: 13,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 18.w, bottom: 10.w),
            child: Stack(
              children: <Widget>[
                Text.rich(
                  TextSpan(
                      text: '￥',
                      style: TextStyle(color: Color(0xFFdf769e), fontSize: 12),
                      children: [
                        TextSpan(
                          text: '$money',
                          style:
                              TextStyle(color: Color(0xFFdf769e), fontSize: 17),
                        ),
                        TextSpan(
                          text: " / 2磅",
                          style:
                              TextStyle(color: Color(0xFFc6c6c6), fontSize: 10),
                        ),
                        TextSpan(
                          text: '     ',
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.8),
                            fontSize: 14,
                          ),
                        ),
                        WidgetSpan(
                          alignment: PlaceholderAlignment.top,
                          child: ClipOval(
                              child: Container(
                            height: 12.w,
                            width: 12.w,
                            child: Image.network(
                              'http://112.126.61.91:3000/img/appimg/ia_100000004.png',
                              fit: BoxFit.cover,
                            ),
                          )),
                        ),
                        TextSpan(
                          text: ' 5000',
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.8),
                            fontSize: 12,
                          ),
                        ),
                        TextSpan(
                          text: ' ',
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.8),
                            fontSize: 14,
                          ),
                        ),
                        WidgetSpan(
                          alignment: PlaceholderAlignment.top,
                          child: ClipOval(
                              child: Container(
                            height: 12.w,
                            width: 12.w,
                            child: Image.network(
                              'http://112.126.61.91:3000/img/appimg/ia_100000001.png',
                              fit: BoxFit.cover,
                            ),
                          )),
                        ),
                        TextSpan(
                          text: ' 1926',
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.8),
                            fontSize: 12,
                          ),
                        ),
                      ]),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  getChild() {
    return Container(
      color: Colors.white,
      width: 300.w,
      height: 200.w,
      alignment: Alignment.center,
      child: Text(
        "Card",
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        _swiperWidget(),
        _hotProductListWidget(),
        Container(
            height: 30.w,
            margin: EdgeInsets.only(right: 30.w, left: 30.w),
            child: Image.asset(
              'assets/images/tj.jpg',
              height: 30.w,
              width: 100.w,
            )),
        // _cardWidget(),
        _cardWidgetList()
      ],
    );
  }
}
